<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Homepage</title>

  <!-- 引入bootstrap框架的样式文件 -->
  <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
  <link href="../css/index/index.css" rel='stylesheet' type='text/css' media="all">

  <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
  <script src="../plugins/jquery/jquery.min.js"></script>
  <!--引入bootstrap的js文件-->
  <script src="../plugins/bootstrap/js/bootstrap.js"></script>

</head>

<body>
  <!--导航-->
  <div class="container-fluid">
    <!-- 使页面铺满整个屏幕 -->
    <div class="row">
      <nav class="navbar navbar" role="navigation" style="width: 100%">
        <div class="navbar-brand">
          <a class="navbar-brand" href="#">
            <img src="imgs/" alt=""></a>
        </div>
        <div class="navbar-brand">
          <div class="info">
            <p onclick="">
              <input type="text" placeholder="请输入要查找的信息" id="invalue">
              <img src="../imgs/index/search.png" id="searchs">
            </p>
            <!-- <img src="../imgs/index/touxiang.png" >   
              <span>大树</span> -->
          </div>
        </div>
        <!--右边-->
        <!-- <div> -->
          <ul class="nav navbar-nav navbar-right">
            <li class="pure-menu-selected"><a href="#" class="mynav-underline-active"><b>首页</b></a></li>
            <li><a href="../views/forum/forum.html" class="nav-underline"><b>论坛</b></a></li>
            <li><a href="../views/PetDynamics/dynamic.html" class="nav-underline"><b>宠物动态</b></a></li>
            <li><a href="../views/trading/homepage.html" class="nav-underline"><b>二手市场</b></a></li>
            <li><a href="../views/fun-function.html" class="nav-underline"><b>趣味专区</b></a></li>
            <li><a href="../views/message-centre.html" class="nav-underline"><b>消息中心</b></a></li>
            <li><a href="../views/PetPerson/person.html" class="nav-underline">
                <img src="../imgs/index/touxiang.png" class="my">
              </a></li>
  
          </ul>
  

      </nav>

      <!--导航结束-->

      <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" style="margin-top: -20px;">
        <ol class="carousel-indicators">
          <li data-target="#carousel" data-slide-to="0" class="active"></li>
          <li data-target="#carousel" data-slide-to="1"></li>
          <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
          <div class="active item">
            <img src="../imgs/index/1.jpg" alt="First slide" style="height: 529px;">
            <div class="carousel-caption">

              <div class="fj" style="margin-top:250px">
                <h3>狗民社区</h3>
                <h5>科学养狗,为爱成长</h5>
                <div style="margin: 10px 0 25px;">
                  <p class="fjp">
                    <img src="../imgs/index/two.png" style="width: 35px;height:35px">
                    <span class="fjspan">7878</span>宠友
                  </p>
                  <p class="fjp">
                    <img src="../imgs/index/three.png" style="width: 35px;height:35px">
                    <span class="fjspan">7878</span>动态
                  </p>
                  <p class="fjp">
                    <img src="../imgs/index/four.png" style="width: 35px;height:35px">
                    <span class="fjspan">7878</span>达人
                  </p>

                  <button type="button" class="btn btn-primary btn-lg fjbut">让养宠更加快乐</button>
                </div>

              </div>

            </div>
          </div>
          <div class="item">
            <img src="../imgs/index/2.jpg" alt="First slide" style="height: 529px;">
            <div class="carousel-caption">
              <div class="fj" style="margin-top:-250px;background-color: rgba(255, 248, 220, 0);">
                  <p class="fjp">
                    <img src="../imgs/index/three.png" style="width: 35px;height:35px">
                  </p>
                  <button type="button" class="btn btn-primary btn-lg" style="background-color: rgba(255, 248, 220, 0);border: 2px solid #fff">加入社区让养宠更加快乐</button>


              </div>
            </div>
          </div>
          <div class="item">
            <img src="../imgs/index/3.jpg" alt="First slide" style="height: 529px;">
            <div class="carousel-caption">
              <div class="fj" style="margin-top:250px">
                <h3>狗民社区</h3>
                <h5>科学养狗,为爱成长</h5>
                <div style="margin: 10px 0 25px;">
                  <p class="fjp">
                    <img src="../imgs/index/two.png" style="width: 35px;height:35px">
                    <span class="fjspan">7878</span>宠友
                  </p>
                  <p class="fjp">
                    <img src="../imgs/index/three.png" style="width: 35px;height:35px">
                    <span class="fjspan">7878</span>动态
                  </p>
                  <p class="fjp">
                    <img src="../imgs/index/four.png" style="width: 35px;height:35px">
                    <span class="fjspan">7878</span>达人
                  </p>

                  <button type="button" class="btn btn-primary btn-lg fjbut">让养宠更加快乐</button>
                </div>

              </div>
            </div>
          </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
      </div>
    </div>
  </div>

  <!-- 主体 -->
  <div class="container">
    <div class="hrspan" style="padding-top: 5px">
      <hr class="hrLine" style="width:40%;" /> <span>养宠百科</span>
      <hr class="hrLine" style="width:41%;" />
    </div>
    <div class="page">
      <ul>
        <li class="zt-one"><a href="#">0-6月</a></li>
        <li class="zt-two"><a href="#">6-12月</a></li>
        <li class="zt-three"><a href="#">1-7岁</a></li>
        <li class="zt-four"><a href="#">7岁以上</a></li>
      </ul>

    </div>

    <!-- ajax -->
    <div>
      <div class="zt1" style="margin-top: 35px">
        <div class="col-md-3" style="margin-left: -12px">
          <img src="../imgs/index/aa.jpg" class="img-rounded" style="height: 183px;width: 245px;">
        </div>
        <div class="col-md-3" style="margin-left: -15px">
          <a href="#">成年犬还需要补钙吗？</a>
          <p class="wb1">
            领养一只小奶狗回家，还有什么事比这更让人兴奋呢？铲屎哥也为你感到开心！可是在这兴奋之余，铲屎哥一些话要啰嗦几句！很多新晋铲屎官有一些误区，以为精心准备好了食物，为小狗打造好休息睡觉的小窝就可以了。
            但小狗身体却越来越差，甚至生病，就以为自己接回来的是
            病狗,但是其实，是自己的过失害了狗狗！作为新手铲屎官，还有很多事等着你去做</p>
        </div>
        <div class="zt2">
          <div class="col-md-3">
            <ul style="margin-left: -10px">
              <li style="margin-top: -15px"><img src="../imgs/index/wen.png" /><a href="#">怎样人工喂养幼犬</a></li>
              <li><img src="../imgs/index/wen.png" /><a href="#">怎样人工喂养幼犬</a></li>
              <li><img src="../imgs/index/wen.png" /><a href="#">怎样人工喂养幼犬</a></li>
              <li><img src="../imgs/index/wen.png" /><a href="#">怎样人工喂养幼犬</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- ajax -->
      <!-- --右边-- -->
      <div class="yzt1">
        <div class="col-md-3" style="margin-top: -2px">
          <div class="ystatic" style="height: 40px;width: 297px;font-size: 18px;margin-bottom: 26px;">
            <img src="../imgs/index/im-message.png" class="wt">
            <span style="top:9px;position: relative;">为
              <span style="color: #66cfee;">484548</span>
              宠友解决问题
            </span>

            <ul style="overflow: hidden;margin-left: -38px;margin-top: 40px;">
              <li>
                <span class="wts">2019.08.12</span>
                <a href="#">挑食啊，瘦！要吃什么狗粮啊？</a>
              </li>
              <li>
                <span class="wts">2019.08.12</span>
                <a href="#">挑食啊，瘦！要吃什么</a>
              </li>
              <li>
                <span class="wts">2019.08.12</span>
                <a href="#">洗澡问题</a>
              </li>
              <li>
                <span class="wts">2019.08.12</span>
                <a href="#">
                  狗狗身上起疹子，有红点和红斑。</a>
              </li>
              <li>
                <span class="wts">2019.08.12</span>
                <a href="#">洗澡问题</a>
              </li>
              <li>
                <span class="wts">2019.08.12</span>
                <a href="#">洗澡问题</a>
              </li>
              <li>
                <span class="wts">2019.08.12</span>
                <a href="#">
                  狗狗身上起疹子，有红点。</a>
              </li>
              <li>
                <span class="wts">2019.08.12</span>
                <a href="#">洗澡问题</a>
              </li>
              <li>
                <span class="wts">2019.08.12</span>
                <a href="#">狗狗洗澡问题</a>
              </li>

              <li>
                <span class="wts">2019.08.12</span>
                <a href="#">
                  狗狗身上起疹子，有红点和红斑。</a>
              </li>
              <li>
                <span class="wts">2019.08.12</span>
                <a href="#">
                  狗狗身上起疹子，有红点。</a>
              </li>

            </ul>
            <a href="#" class="ystatic1">更多问题</a>


          </div>
        </div>
      </div>

      <!-- 左边下方 -->
      <div class="col-md-9" style="margin-left: -18px">
        <div class="col-md-3">
          <div class="zt3">青年犬喂养</div>
          <img src="../imgs/index/zt1.png">

          <div class="zt4">
            <span class="glyphicon glyphicon-tag" style="margin-top: 15px;"></span>
            <a href="#">幼犬如何正确饲养</a><br>

            <span class="glyphicon glyphicon-tag"></span>
            <a href="#">幼犬如何正确饲养</a>
            <!-- 更多按钮 -->
            <div class="more">
              <a href="#">更多</a>
            </div>
          </div>

        </div>
        <div class="col-md-3">
          <div class="zt3">青年犬护理</div>
          <img src="../imgs/index/zt2.jpg">
          <div class="zt4">
            <span class="glyphicon glyphicon-tag" style="margin-top: 15px;"></span>
            <a href="#">幼犬如何正确饲养</a><br>

            <span class="glyphicon glyphicon-tag"></span>
            <a href="#">幼犬如何正确饲养</a>
            <!-- 更多按钮 -->
            <div class="more">
              <a href="#">更多</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="zt3">青年犬健康</div>
          <img src="../imgs/index/zt3.jpg">
          <div class="zt4">
            <span class="glyphicon glyphicon-tag" style="margin-top: 15px;"></span>
            <a href="#">幼犬如何正确饲养</a><br>

            <span class="glyphicon glyphicon-tag"></span>
            <a href="#">幼犬如何正确饲养</a>
            <!-- 更多按钮 -->
            <div class="more">
              <a href="#">更多</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="zt3">青年犬训练</div>
          <img src="../imgs/index/zt4.png">
          <div class="zt4">
            <span class="glyphicon glyphicon-tag" style="margin-top: 15px;"></span>
            <a href="#">幼犬如何正确饲养</a><br>

            <span class="glyphicon glyphicon-tag"></span>
            <a href="#">幼犬如何正确饲养</a>
            <!-- 更多按钮 -->
            <div class="more">
              <a href="#">更多</a>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
  <!-- 社区 -->
  <div class="container">
    <div style="margin-top:40px">
      <div class="hrspan" style="padding-top: 5px">
        <hr class="hrLine" style="width:43%;" /> <span>社区</span>
        <hr class="hrLine" style="width:46%;" />
      </div>
    </div>

    <div class="col-md-9" style="margin-bottom: 5px;">
      <span class="ztx1">宠物动态中心</span>
      <span class="ztx1">闲置交易中心</span>
      <span class="ztx1">宠物养护中心</span>
      <span class="ztx1">宠物集中营</span>
      <span class="ztx1">更多</span>

      <div class="xztleft">
        <a href="#" class="xztlefta">关于癌症和安乐</a>
        <span>精华</span>
        <!-- <br> -->
        <br>
        <br>
      </div>
      <a href="#" class="xztlefta1" style="color: #999;">
        没想到过了这么多年再回来就是这么沉重的话题说一下现在的情况，2个月前乳腺瘤切除，但肿瘤转移到了肺部，上周拍片显示肺部一大半都已有阴影，按医生的说法，肿瘤发展的很快，只能吃药拖时间，再不行就带去打一针。上周末开始吃药，之后的几天看上去好像有一...</a>

      <p style="margin-top: 4px;line-height: 12px;">
        <i class="rsi2">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
        <i class="rsi4">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
        <i class="rsi3">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">21</span>
      </p>
      <hr class="hrLine" style="width:100%;" />



      <div class="xztleft">
        <a href="#" class="xztlefta">关于癌症和安乐</a>
        <span>精华</span>
        <!-- <br> -->
        <br>
        <br>
      </div>
      <a href="#" class="xztlefta1" style="color: #999;">
        没想到过了这么多年再回来就是这么沉重的话题说一下现在的情况，2个月前乳腺瘤切除，但肿瘤转移到了肺部，上周拍片显示肺部一大半都已有阴影，按医生的说法，肿瘤发展的很快，只能吃药拖时间，再不行就带去打一针。上周末开始吃药，之后的几天看上去好像有一...</a>

      <p style="margin-top: 4px;line-height: 12px;">
        <i class="rsi2">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
        <i class="rsi4">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
        <i class="rsi3">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">21</span>
      </p>
      <hr class="hrLine" style="width:100%;" />


      <div class="xztleft">
        <a href="#" class="xztlefta">关于癌症和安乐</a>
        <span>精华</span>
        <!-- <br> -->
        <br>
        <br>
      </div>
      <a href="#" class="xztlefta1" style="color: #999;">
        没想到过了这么多年再回来就是这么沉重的话题说一下现在的情况，2个月前乳腺瘤切除，但肿瘤转移到了肺部，上周拍片显示肺部一大半都已有阴影，按医生的说法，肿瘤发展的很快，只能吃药拖时间，再不行就带去打一针。上周末开始吃药，之后的几天看上去好像有一...</a>

      <p style="margin-top: 4px;line-height: 12px;">
        <i class="rsi2">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
        <i class="rsi4">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
        <i class="rsi3">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">21</span>
      </p>
      <hr class="hrLine" style="width:100%;" />



      <div class="xztleft">
        <a href="#" class="xztlefta">关于癌症和安乐</a>
        <span>精华</span>
        <!-- <br> -->
        <br>
        <br>
      </div>
      <a href="#" class="xztlefta1" style="color: #999;">
        没想到过了这么多年再回来就是这么沉重的话题说一下现在的情况，2个月前乳腺瘤切除，但肿瘤转移到了肺部，上周拍片显示肺部一大半都已有阴影，按医生的说法，肿瘤发展的很快，只能吃药拖时间，再不行就带去打一针。上周末开始吃药，之后的几天看上去好像有一...</a>

      <p style="margin-top: 4px;line-height: 12px;">
        <i class="rsi2">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
        <i class="rsi4">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
        <i class="rsi3">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">21</span>
      </p>
      <hr class="hrLine" style="width:100%;" />




      <div class="xztleft">
        <a href="#" class="xztlefta">关于癌症和安乐</a>
        <span>精华</span>
        <!-- <br> -->
        <br>
        <br>
      </div>
      <a href="#" class="xztlefta1" style="color: #999;">
        没想到过了这么多年再回来就是这么沉重的话题说一下现在的情况，2个月前乳腺瘤切除，但肿瘤转移到了肺部，上周拍片显示肺部一大半都已有阴影，按医生的说法，肿瘤发展的很快，只能吃药拖时间，再不行就带去打一针。上周末开始吃药，之后的几天看上去好像有一...</a>

      <p style="margin-top: 4px;line-height: 12px;">
        <i class="rsi2">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
        <i class="rsi4">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
        <i class="rsi3">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">21</span>
      </p>
      <hr class="hrLine" style="width:100%;" />



      <div class="xztleft">
        <a href="#" class="xztlefta">关于癌症和安乐</a>
        <span>精华</span>
        <!-- <br> -->
        <br>
        <br>
      </div>
      <a href="#" class="xztlefta1" style="color: #999;">
        没想到过了这么多年再回来就是这么沉重的话题说一下现在的情况，2个月前乳腺瘤切除，但肿瘤转移到了肺部，上周拍片显示肺部一大半都已有阴影，按医生的说法，肿瘤发展的很快，只能吃药拖时间，再不行就带去打一针。上周末开始吃药，之后的几天看上去好像有一...</a>

      <p style="margin-top: 4px;line-height: 12px;">
        <i class="rsi2">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
        <i class="rsi4">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
        <i class="rsi3">&nbsp;</i>
        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">21</span>
      </p>
      <hr class="hrLine" style="width:100%;" />

    </div>

    <!-- 24小时热搜榜 -->
    <div class="col-md-3">
      <div class="xztRight">24小时热帖榜</div>
      <div class="xztRight1">

        <li class="rsli">
          <p>
            1
          </p>
          <div class="rsdiv">
            <a href="#" class="xztRight1a">瞬间长大了</a>
            <p style="margin-top: 4px;line-height: 12px;">
              <i class="rsi2">&nbsp;</i>
              <span style="margin-right: 10px;font-size: 12px;">144</span>
              <i class="rsi3">&nbsp;</i>
              <span style="margin-right: 10px;font-size: 12px;">21</span>
            </p>
          </div>
        </li>

        <li class="rsli">
          <p>
            2
          </p>
          <div class="rsdiv">
            <a href="#" class="xztRight1a">瞬间长大了</a>
            <p style="margin-top: 4px;line-height: 12px;">
              <i class="rsi2">&nbsp;</i>
              <span style="margin-right: 10px;font-size: 12px;">144</span>
              <i class="rsi3">&nbsp;</i>
              <span style="margin-right: 10px;font-size: 12px;">21</span>
            </p>
          </div>
        </li>
        <li class="rsli">
          <p>
            3
          </p>
          <div class="rsdiv">
            <a href="#" class="xztRight1a">瞬间长大了</a>
            <p style="margin-top: 4px;line-height: 12px;">
              <i class="rsi2">&nbsp;</i>
              <span style="margin-right: 10px;font-size: 12px;">144</span>
              <i class="rsi3">&nbsp;</i>
              <span style="margin-right: 10px;font-size: 12px;">21</span>
            </p>
          </div>
        </li>
        <li class="rsli">
          <p>
            4
          </p>
          <div class="rsdiv">
            <a href="#" class="xztRight1a">瞬间长大了</a>
            <p style="margin-top: 4px;line-height: 12px;">
              <i class="rsi2">&nbsp;</i>
              <span style="margin-right: 10px;font-size: 12px;">144</span>
              <i class="rsi3">&nbsp;</i>
              <span style="margin-right: 10px;font-size: 12px;">21</span>
            </p>
          </div>
        </li>

        <li class="rsli">
          <p>
            5
          </p>
          <div class="rsdiv">
            <a href="#" class="xztRight1a">瞬间长大了</a>
            <p style="margin-top: 4px;line-height: 12px;">
              <i class="rsi2">&nbsp;</i>
              <span style="margin-right: 10px;font-size: 12px;">144</span>
              <i class="rsi3">&nbsp;</i>
              <span style="margin-right: 10px;font-size: 12px;">21</span>
            </p>
          </div>
        </li>
        <!-- 更多按钮 -->
      </div>
    </div>


  </div>


  <!-- <div class="footer">
        <p>Copyright © 2019.Company name All rights reserved.More Templates </p>
        <p>Copyright © 2019.Company name All rights reserved.More Templates </p>
      </div> -->

  <div class=" foot">
    <div class="foot-inner">
      <div class="container">
        <div class="row">
          <div class="col-md">
            <div class="col-md-4 foot-text">
              <b>关于我们</b>
              <div style="margin-top:20px;">
                <p>加入社区 让养宠更快乐</p>
              </div>
              <div style="margin-top:20px;">
                <p>@suzhouchixing有限公司 版权所有</p>
              </div>

            </div>
            <div class="col-md-4 foot-text">
              <b>联系我们</b>
              <div style="margin-top:20px;">
                <i class="glyphicon glyphicon-earphone"></i>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                服务专线:400 054 3033
              </div>
              <div style="margin-top:20px;">
                <i class="glyphicon glyphicon-envelope"></i>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                suzhou@.com
              </div>
              <div style="margin-top:20px;">
                <i class="glyphicon glyphicon-map-marker"></i>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                苏州市
                工业园区星湖街天使大厦36号
              </div>
              <div style="margin-top:20px;">
                <i class="glyphicon glyphicon-time"></i>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Monday - Friday, 9am - 6 pm;
              </div>

            </div>
            <div class="col-md-4 foot-text">
              <b>关注我们</b>
              <div style="margin-top:20px;">
                <img src="../imgs/index/timg.jpg" style="width: 250px;height:250px;">
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

  <a href="#" class="toTop" style="display: block;">
    <span class="toTopHover" style="opacity: 0;"></span>
  </a>





  <script src="../plugins/jquery/jquery.min.js"></script>
  <script src="../plugins/bootstrap/js/bootstrap.js"></script>
  <script src="../js/person/person.js"></script>
</body>

</html>